<html>
    <title>OpenSeadragon Overlay Demo</title>
    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
    <script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
    <style type="text/css">

        .openseadragon1 {
            width: 800px;
            height: 600px;
        }

    </style>
</head>
<body>
    <div id="contentDiv" class="openseadragon1"></div>
    <div id="annotation-div">
        <input type="button" value="Hide Overlays" id="hideOverlays">
        <input type="button" value="Rotate" id="rotate">
        <span id="degrees">0deg</span>
    </div>

    <script type="text/javascript">

        var viewer = OpenSeadragon({
            id: "contentDiv",
            prefixUrl: "../../build/openseadragon/images/",
            tileSources: "../data/testpattern.dzi",
            minZoomImageRatio: 0,
            maxZoomPixelRatio: 10,
            overlayPreserveContentDirection: true  // Change this to false to test overlay content flipping
        });

        viewer.addHandler("open", function(event) {
            var elt = document.createElement("div");
            elt.className = "runtime-overlay";
            elt.style.background = "green";
            elt.style.outline = "3px solid red";
            elt.style.opacity = "0.7";
            elt.textContent = "Scaled overlay";
            viewer.addOverlay({
                element: elt,
                location: new OpenSeadragon.Rect(0.21, 0.21, 0.099, 0.099),
                rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
            });

            // test with image of letter B to see that images flip too
            elt = document.createElement("div");
            elt.className = "runtime-overlay";
            elt.style.outline = "1px solid blue";
            elt.style.height = "100px";
            elt.innerHTML = "<div><img src='../data/BBlue.png' width='100%' height='100%'/></div>"
            viewer.addOverlay({
                element: elt,
                location: new OpenSeadragon.Point(0.0, 0.0),
                width: 0.1,
                height: 0.1
            });

            elt = document.createElement("div");
            elt.className = "runtime-overlay";
            elt.style.background = "white";
            elt.style.outline = "3px solid red";
            elt.style.width = "100px";
            elt.textContent = "Scaled vertically";
            viewer.addOverlay({
                element: elt,
                location: new OpenSeadragon.Point(0.6, 0.6),
                height: 0.1,
                placement: OpenSeadragon.Placement.TOP_LEFT,
                rotationMode: OpenSeadragon.OverlayRotationMode.NO_ROTATION
            });

            elt = document.createElement("div");
            elt.className = "runtime-overlay";
            elt.style.background = "white";
            elt.style.opacity = "0.5";
            elt.style.outline = "1px solid blue";
            elt.style.height = "100px";
            elt.textContent = "Scaled horizontally";
            viewer.addOverlay({
                element: elt,
                location: new OpenSeadragon.Point(0.1, 0.5),
                width: 0.1
            });

            elt = document.createElement("div");
            elt.className = "runtime-overlay";
            elt.style.background = "white";
            elt.style.opacity = "0.5";
            elt.style.outline = "5px solid pink";
            elt.style.width = "100px";
            elt.style.height = "100px";
            elt.textContent = "Not scaled, centered in the middle";
            viewer.addOverlay({
                element: elt,
                location: new OpenSeadragon.Point(0.5, 0.5),
                placement: OpenSeadragon.Placement.CENTER,
                checkResize: false,
                rotationMode: OpenSeadragon.OverlayRotationMode.EXACT
            });

        });
        $("#hideOverlays").click(function(){
            $(".runtime-overlay").toggle();
        });
        $("#rotate").click(function() {
            viewer.viewport.setRotation(viewer.viewport.getRotation() + 22.5);
            $("#degrees").text(viewer.viewport.getRotation() + "deg");
        });

    </script>
</body>
</html>